import './main.css'
import Tap from '../tap/index.js'
import Content from '../content/indes.js'
import 'components/loading/loading'
import { set, get } from '../../../../utils/sessionStorage'

const tapEl = document.querySelector('.tap')
const tap = new Tap(tapEl)
const content = new Content(document.getElementById('destination-content'))
const itemEls = tapEl.querySelectorAll('.tap-item')
//第一种方法
// for (const itemEl of itemEls) {
//     itemEl.addEventListener('click',()=>{
//         const index = itemEl.dataset.id-1
//         tap.to(index)
//     },false)
// }

//第二种方法时间代理（原理：事件冒泡机制
tapEl.addEventListener('click', ev => {
    const itemEl = ev.target
    if (itemEl.classList.contains('tap-item')) {
        const index = itemEl.dataset.id - 1
        const storageName = `destination_content_${index}`
        const storageContent = set(storageName)
        if (storageContent) {
            tap.setActiveItem(index)
            content.get(storageContent)
        } else {
            const tapPromise = tap.to(index)

            content.setLoading()
            tapPromise.then(data => {
                content.set(data)
                set(storageName,data)
            })
        }
    }
}, false)

itemEls[1].click()//通过程序先自动点击一个
// tap.to(0).then(data=>{
//     content.set(data)
// })
// tap.setActiveItem(5)
// tap.to(0)